<template>
	<div class="basic_area_chart" :id="idName">散点图</div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, toRefs, computed, onMounted, watch } from "vue";
import {
  paramsFun,
  $fullUrl,
  $toTime,
  $banseUrl,
  $check_action,
  $getUrlParams,
} from "@/utils/utils.js";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
let router = useRouter();
const emit = defineEmits(["changeTab"]);
const props = defineProps({
	idName: {
		type: String,
		default: "lineChart"
	},
	title: {
		type: String,
		default: "XXX折线图"
	},
	vm: {
		type: Object,
		default: function() {
			return {
				xAxis: "xAxis",
				names: "names",
				values: "values",
			};
		},
	},
});
let { idName, title, vm,} = toRefs(props);
const itemStyle = {
  opacity: 0.8,
  shadowBlur: 10,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  shadowColor: 'rgba(0,0,0,0.3)'
};
let option=ref({
  title: {
		text: "XXX散点图",
		left: "center",
	},
color: ['#dd4444', '#fec42c', '#80F1BE'],
  legend: {
    data: ['正常账户', '冻结账户'],
    textStyle: {
      fontSize: 16
    },
    y: 'bottom'
  },
  grid: {
    left: "3%",
		right: "10%",
		bottom: "14%",
		containLabel: true,
  },
  tooltip: {
    backgroundColor: 'rgba(255,255,255,0.7)',
    formatter: function (param) {
      var value = param.value;
      return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + param.seriesName + ' ' +value[1]           
    }
  },
  xAxis: [{
		type: 'category',
     name: '月份',
    boundaryGap: false,
    data: vm.value.xAxis
	}],
  
  yAxis: {
   
  },
  series: [
    {
      name: '正常账户',
      type: 'scatter',
      itemStyle: itemStyle,
      data: []
    },
    {
      name: '冻结账户',
      type: 'scatter',
      itemStyle: itemStyle,
      data: []
    },
  ]
})
const series = computed(() => {
	let values=[]
   values[0]= vm.value.values.available;
   values[1]= vm.value.values.freeze;
	return values;
})
let init_chart = () => {
  let optionObj = option.value;

	let titleObj = title.value;
	if (titleObj) {
		optionObj.title.text = titleObj;
	}
  optionObj.series[0].data = series.value[0];
    optionObj.series[1].data = series.value[1];
	let myChart = echarts.init(document.getElementById(idName.value));
	myChart.setOption(optionObj);
};
watch(series, (newValue, oldValue) => {
  if (newValue) {
    init_chart();
  }
});
onMounted(() => {
	setTimeout(()=>{
			init_chart();
	},200)

});



</script>
